Mobility has already become mainstream interface for applications and end users, even the most complex and heavy applications are converging to be fully compatible to these devices, but supporting mobility comes with technical and hardware constraints such as memory space, processing speed and small display screen sizes. These constraints force applications to compromise on user experience. As part of software development till now we have been able to adapt in order to improve processing and memory utilization, but the small screen sizes on mobile devices has always been a challenge.
Introduction
3D graphics and VR ( Virtual Reality ) has always been a fascinating topic in computer science, but in last decade it has grown exponentially more powerful, realistic and at the same time easy to use too. Growing research in these fields both academics and IT companies have provided a very strong base and opportunities for their usage in various unexplored fields and mobility being one of them.
In current trend all web or desktop applications need to have mobility support due to the advantages that mobile devices themselves provides, small, light and mobile. In order to support mobility, applications need to overcome technical and hardware constraint such as limited memory, slow processing power and small display screens. Limited memory and slow processing powers can be resolved by adopting efficient coding practices, but small screens cause’s applications to compromise on user experience by limiting data details or user interaction capabilities.
The idea proposes a new user experience design approach (3DHTML-Web) to bring 2D and 3D content under a single 3D virtual context environment to provide a wide virtual view to the end user, thus allowing applications to provide large detailed data through the same small screens. Complete 3D virtual environment would also allow applications to be future compatible with touchless VR technologies which majorly reply on content to be in 3D context and provide a very engaging, different and seamless user experience.
Problem
There are two problem statements addressed
1. Limited Viewable Area Due to Small Screen Sizes in Mobility Devices
Web applications adaptation of mobility has caused them to change UI ( User Interface) design approach and become dynamically adaptive to various screen sizes, but with complex applications came problem of accommodating and representing the large set of information on these small screens.
2. Fragmented User Experience with Combination of 2D And 3D Objects Content
Representing 3D objects in 2D contextual environment has always resulted in reduced usability and fragmented user experience, where user continuously switch between 2D and 3D user interfaces. To provide a seamless and user friendly UX ( User Experience), this fragmentation needs to be eliminated while maintain the advantage that 3D objects/model brings to the end-user.
Proposal
3DHTML — Web is a user experience design approach to represent HTML elements as 3D/2D objects in a pre-defined controlled 3D virtual environment, which can be made accessible over web through web browsers. It transforms the user experience to three dimensional using modern browser based lightweight 3D rendering technologies such as webGL or CSS3, this allows the application to provide a new enhanced user experience through the existing web browsers.
3DHTML — WEB DESIGN ALGORITHM
1. Identifying the Story : Identify the scenario where the end user would be benefited if interacting within a 3D environment. Generally where end user interacts with combined 2D and 3D data are the prominent candidate, whereas even traditional applications whose majorities of user interaction are based on tables, list and graphs can also be benefited by this design.
2. Objects Classification : Classification of various application intractable objects as 2D or 3D. This classification helps in scene and environment preparation.
3. Environment Layout : Environments define the boundaries of the user interaction and the look & feel application want the end user to visualize them in.
4. Define the Scene : Scene can be considered as a step by step inaction of a story (Business goal/Scenario). Scene preparation consists of following 2 steps
– Scene Steps Extraction: Scene steps are the end user way finding to reach the end goal (success or failure).
– Scene Sequencing : This defines the actual sequencing of steps that user need to complete to finish the story. This can be blocking sequence where the user cannot move forward/backward before performing some operation or Non-blocking that allows the user to move back and forward any time as needed.
5. Define User Interaction : How the User would interact with the environment and the objects inside it. Basic user interaction rules to have a consistent experience for the end user
3DHTML — USER EXPERIENCE DESIGN APPROACH
3DHTML Web design can be easily implemented usingany light weight browser rendering technologies; among those currently widely used in the industry is THREE.js , it internally uses WebGL. THREE provides wide variety of utility and rendering options, in context of 3DHTML web design the WebGLRenderer and CSSJRenderer options available in THREE can be used for rendering 3D and 2D content respectively.
Conclusions
3DHTML — Web design approach provides the basic algorithm to combine 2D and 3D content inside a 3D virtual contextual environment in order to enhance the user experience and resolve screen size constraint. It also allows traditional applications which majorly deal with 2D content such as table, forms and graphs to become compatible with modern touchless virtual reality technologies.
References
2. Three Dimensional Graphics (3D)
3. Virtual Reality Technology, 2nd Edition by Grigore C. Burdea, Philippe Coiffet ,
4. WebGL: Up and Running by Tony Parisi
5. CSS3
6. THREE.js